<template>
  <div class="box">
    <div class="box1">
      <ul>
        <li v-for="(item, index) in rm" :key="index">
          <div class="tu-box"  @click.prevent="tiao(item.id,item)">
            <img :src="item.img | tihuan(item.img)" alt="" />
            <div class="box2">
              <p class="ti">{{ item.nm }} 
                    <span :class="item.version | getVersion(item.version )" v-if="item.version !== ''"></span>
                  </p>
              <p>
                观众评分<span>{{ item.sc }}</span>
              </p>
              <p class="zhu">主演:{{ item.star }}</p>
              <p>{{ item.showInfo }}</p>
            </div>
          </div>
          <div class="gou"  @click.self ="ac(item.id,item)" >
            {{ item.showStateButton.content }}

          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      arr:[]
    }
  },
  methods:{
    tiao(a,b){
      console.log(b);
      this.$router.push({name:'XiangQing',params:{id:a}})
      let obj ={}
      
  obj.img = b.img
  obj.nm =  b.nm

this.arr.push(obj)
     console.log(this.arr);


     




    },
    ac(a,b){
      console.log(a);
       this.$router.push({name:'piao',params:{id:a}})
        this.$store.commit('addArr',b)
      
    }
   
  },
  props: {
    rm: {
      typeof: Array,
    },
  },
  filters: {
    tihuan(e) {
      let imgUrl = e.replace("w.h", "64.90");
      return imgUrl;
    },
    getVersion(e){
        // console.log(e);
        return e == 'v2d imax' ? 'movie-version-2d' : 'movie-version-3d'
    },
  },
  created() {
    console.log(this.rm);
  },
};
</script>
<style lang="less" scoped>
.box {
  .box1 {
    ul {
      li {
        border-bottom: 1px solid #f0f0f0;
         padding: 10px 0;
        position: relative;
        
         .gou {
            font-size: 15px;
            position: absolute;
            width: 54px;
            height: 28px;
            background-color: red;
            border-radius: 50px;
            text-align: center;
            line-height: 28px;
            right: 0;
            top: 35px;
            color: white;
          }
        .tu-box{
          display: flex;
          margin: 10px;

         
         
          img {
            width: 60px;
            height: 90px;
          }
          .box2 {
            .movie-version-2d {
              display: inline-block;
              width: 43px;
              height: 16px;
              background: url("https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/hot-tab/img/base64/v2dimax.png")
                no-repeat;
              background-size: 100%;
              margin: 5px 3px 0 5px;
            }
  
            .movie-version-3d {
              display: inline-block;
              width: 17px;
              height: 14px;
              background: url("https://s0.meituan.net/bs/myfe/canary/file/touchnode/images/dpmmweb/hot-tab/img/base64/v3d.png");
              background-size: 100%;
              margin: 5px 3px 0 5px;
            }
            padding-left: 10px;
            .ti {
              color: black;
              font-size: 17px;
              font-weight: 900;
            }
            .zhu {
              font-size: 10px;
              width: 200px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              // padding: 5px 0;
            }
            p {
              color: #666;
              font-size: 10px;
              padding-bottom: 5px;
              span {
                padding-left: 5px;
                font-weight: 900;
  
                color: #faaf00;
              }
            }
          }
        }
        }
    }
  }
}
</style>